<template>
  <el-aside
    :class="isCollapse ? 'w-70' : 'w-230'"
    style="background-color: #042641"
  >
    <el-menu
      router
      active-text-color="#fff"
      background-color="#042641"
      class="el-menu-vertical-demo"
      :default-active="defaultPath"
      text-color="#aab5be"
      :collapse="isCollapse"
      :unique-opened="true"
      @open="handleOpen"
      @close="handleClose"
    >
      <div class="collapse-box">
        <span @click="isCollapse = !isCollapse">
          <el-icon v-if="isCollapse"><expand /></el-icon>
          <el-icon v-else><fold /></el-icon>
        </span>
      </div>
      <el-sub-menu
        v-for="(item, index) in menuList"
        :key="index"
        :index="item.name"
        :route="item.path"
      >
        <template #title>
          <el-icon><tickets /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(itemChild, indexChild) in item.children"
            :key="indexChild"
            :index="itemChild.name"
            :route="itemChild.path"
          >
            {{ itemChild.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ref } from "vue";
let defaultPath = ref("我的案件");
let isCollapse = ref(false);
// 菜单还不确定，暂时写死
const menuList = [
  {
    name: "案件管理",
    path: "/",
    children: [
      {
        name: "庭审排期",
        path: "/",
      },
    ],
  },
  {
    name: "法院架构管理",
    path: "/information-management",
    children: [
      {
        name: "用户管理",
        path: "/information-management/user-management",
      },
    ],
  },
  {
    name: "智慧庭审",
    path: "/intelligent-trial",
    children: [
      {
        name: "我的案件",
        path: "/intelligent-trial/my-case",
      },
      {
        name: "合议庭案件",
        path: "/intelligent-trial/collegial-bench-case",
      },
    ],
  },
  {
    name: "个人资料",
    path: "/",
    children: [
      {
        name: "个人信息",
        path: "/",
      },
    ],
  },
];
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
}
.collapse-box {
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #28455d;
  height: 30px;
  line-height: 34px;
  color: #fff;
  font-weight: 400;
  span {
    cursor: pointer;
  }
}
.is-active {
  background-color: #106fcf !important;
}
.w-230 {
  width: 230px;
}
.w-70 {
  width: 70px;
}
</style>
